<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!-- <a-breadcrumb>
        <a-breadcrumb-item>营销</a-breadcrumb-item>
        <a-breadcrumb-item>
          <a href="javascipt:;" @click="$router.push({ name: 'VerifyList' })">卡劵</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>卡劵详情</a-breadcrumb-item>
      </a-breadcrumb> -->
      <a-page-header title="卡券详情" @back="() => $router.go(-1)">
        <a-descriptions size="small" :column="3">
          <a-descriptions-item label="卡卷名称"> {{ cardData.name }} </a-descriptions-item>
          <a-descriptions-item label="卡劵类型"> {{ typeText }} </a-descriptions-item>
          <a-descriptions-item label="创建时间"> {{ cardData.created_at }} </a-descriptions-item>
          <a-descriptions-item label="已发放数量"> {{ cardData.send_times }} </a-descriptions-item>
          <a-descriptions-item label="有效时间"> {{ dateText }} </a-descriptions-item>
          <a-descriptions-item label="卡密数量"> {{ cardData.num }} </a-descriptions-item>
        </a-descriptions>
      </a-page-header>

      <a-card :bordered="false" title="卡密信息">
        <a-button slot="extra" style="margin-right: 10px" @click="exportPass">导出表格</a-button>
        <a-button slot="extra" @click="visible = true">生成卡券</a-button>
        <a-button slot="extra" @click="visible_upload = true">导入卡券</a-button>
        <a-row v-for="item in account_info" :key="item" class="m-b-20">
          <a-col :span="3">卡劵卡号：{{ item.account }}</a-col>
          <a-col :span="6">卡劵密码：{{ item.password }}</a-col>
          <a-col :span="3" v-if="cardData.type == 4">
            <template>
              <a-button
                @click="
                  visible_password = true
                  up_id = item.id
                "
                >修改密码</a-button
              ></template
            >
          </a-col>
          <a-col :span="6"
            >使用状态：
            <a-tag color="orange" v-if="item.status == 0"> 未使用 </a-tag>
            <a-tag color="blue" v-else> 已使用 </a-tag>
          </a-col>
          <a-col :span="6">
            <div class="info" v-if="item.status === '1'">
              <a-popover title="" trigger="hover" placement="right">
                <a-button type="primary"> 查看核销信息 </a-button>
                <template slot="content">
                  <a-table
                    style="overflow-y: auto"
                    rowKey="id"
                    :columns="userColumns"
                    :pagination="false"
                    :data-source="item.card_log"
                  >
                  </a-table>
                </template>
              </a-popover>
            </div>
          </a-col>
        </a-row>

        <el-pagination
          :current-page="page"
          background
          layout="prev, pager, next"
          :total="total"
          :pageSize="size"
          @current-change="(e) => getAccountInfo(e)"
        >
        </el-pagination>
      </a-card>

      <!-- 核销卡 -->
      <div v-if="parseInt(cardData.type) <= 1">
        <h3 style="">卡劵内容</h3>

        <a-row class="m-b-20"> 核销次数：{{ cardData.use_num }} </a-row>
        <a-divider />
      </div>

      <!-- 礼品卡 -->
      <div v-show="cardData.type == 2">
        <h3 style="">卡劵内容</h3>

        <a-table :rowKey="id" size="middle" :dataSource="cardData.goodlist" :columns="goodsColumns" :pagination="false">
          <span slot="name" slot-scope="name, item">
            <img
              style="width: 50px; height: 50px; border-radius: 5px; margin-right: 10px"
              :src="item.cover_pic"
              alt=""
            />
            <span>{{ name }}</span>
          </span>

          <span slot="type" slot-scope="type">
            <span v-if="type == 0">普通商品</span>
            <span v-else-if="type == 1">酒店预约</span>
            <span v-else-if="type == 2">服务预约</span>
            <span v-else-if="type == 3">虚拟商品</span>
          </span>
        </a-table>
        <a-divider />
      </div>

      <!-- 储蓄卡 -->
      <div v-show="cardData.type == 3">
        <h3 style="">卡劵内容</h3>

        <a-row>卡劵金额：{{ cardData.total_price }}</a-row>
        <a-divider />
      </div>

      <!-- 视频卡 -->
      <div v-show="cardData.type == 5">
        <h3 style="">卡劵内容</h3>

        <a-table rowKey="id" :dataSource="cardData.videolist" :columns="videoColumns" size="middle">
          <!-- <span slot="title" slot-scope="title">
            <img :src="scoped.title" alt="">
            <span>{{ title }}</span>
          </span> -->
          <template slot="pic_url" slot-scope="pic_url, item">
            <img :src="pic_url" alt="" style="width: 50px; height: 50px; border-radius: 5px; margin-right: 10px" />
            <span>{{ item.title }}</span>
          </template>
        </a-table>

        <a-divider />
      </div>

      <div>
        <h3 style="">领取记录</h3>
        <!-- 核销卡 -->
        <STable
          v-if="parseInt(cardData.type) <= 1"
          :rowKey="
            (r, i) => {
              return r.id
            }
          "
          ref="table"
          :columns="columns1"
          :data="loadData"
        >
          <span class="flex" slot="nickname" slot-scope="nickname, item">
            <img
              :src="item.avatar_url"
              style="width: 45px; height: 45px; border-radius: 5px; margin-right: 10px"
              alt=""
            />
            <div>
              <div>{{ nickname }}</div>
              <div>{{ item.platform }}</div>
            </div>
          </span>
          <span> </span>
        </STable>

        <!-- 除核销卡的卡劵 -->
        <STable
          v-if="parseInt(cardData.type) > 1"
          :rowKey="
            (r, i) => {
              return r.id
            }
          "
          ref="table"
          :columns="columns2"
          :data="loadData"
        >
          <span class="flex" slot="nickname" slot-scope="nickname, item">
            <img
              :src="item.avatar_url"
              style="width: 45px; height: 45px; border-radius: 5px; margin-right: 10px"
              alt=""
            />
            <div>
              <div>{{ nickname }}</div>
              <div>{{ item.platform }}</div>
            </div>
          </span>
          <span slot="card_info" slot-scope="text">
            <div>卡劵卡号：{{ text.account }}</div>
            <div>卡劵密码：{{ text.password }}</div>
          </span>
        </STable>
      </div>
    </a-card>
    <!-- 生成卡券的弹窗 -->
    <a-modal v-model="visible" title="生成卡券" @ok="creatCard" :afterClose="closeModel">
      <div class="option">
        <span style="margin-right: 20px">生成数量:</span>
        <a-input-number v-model="num" :min="1" />
      </div>
    </a-modal>
    <!-- 生成卡券的弹窗 -->
    <a-modal v-model="visible_password" title="修改密码" @ok="password" :afterClose="closeModel_password">
      <div class="option">
        <span style="margin-right: 20px">新密码:</span>
        <a-input v-model="up_password" />
      </div>
    </a-modal>
    <!-- 导入卡券的弹窗 -->
    <a-modal v-model="visible_upload" title="导入卡券" @ok="handleUpload" :afterClose="closeModel_upload">
      <div style="padding: 10px">
        <span style="color: red">*</span><span class="m_l_5">EXCEL文件 : </span>
        <a-upload
          class="m_l_10"
          :file-list="fileList2"
          :remove="(e) => this.handleRemove(e, 'zip')"
          :before-upload="(e) => this.beforeUpload(e, 'zip')"
        >
          <a-button> <a-icon type="upload" /> 上传 </a-button>
        </a-upload>
      </div>
      <div style="color: red">{{ excelName }}</div>
      <div style="padding: 70px 10px 10px; text-align: center">
        <a-button @click="downloadFile"> <a-icon type="download" /> 下载模板 </a-button>
      </div>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { verifyDetail, createCard, exportCard, getAccountInfo, verifyUp, verifyUpload } from '@/api/marketing'
const userColumns = [
  {
    title: '门店信息',
    dataIndex: 'shop_id',
  },
  {
    title: '核销人员',
    dataIndex: 'verify_person',
  },
  {
    title: '核销时间',
    dataIndex: 'use_time',
  },
]

const goodsColumns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '商品信息',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '商品类型',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' },
  },
  {
    title: '售价',
    dataIndex: 'price',
    scopedSlot: { customRender: 'price' },
    sorter: (a, b) => a.price - b.price,
  },
  {
    title: '库存',
    dataIndex: 'goods_num',
    scopedSlot: { customRender: 'goods_num' },
    sorter: (a, b) => a.goods_num - b.goods_num,
  },
]

const videoColumns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },

  {
    title: '视频信息',
    dataIndex: 'pic_url',
    scopedSlots: { customRender: 'pic_url' },
  },
]

const columns1 = [
  {
    title: '用户信息',
    dataIndex: 'nickname',
    scopedSlots: { customRender: 'nickname' },
  },

  {
    title: '剩余次数',
    dataIndex: 'left_num',
    sorter: (a, b) => a.left_num - b.left_num,
  },
  {
    title: '核销次数',
    dataIndex: 'use_num',
    sorter: (a, b) => a.use_num - b.use_num,
  },
  {
    title: '领取时间',
    dataIndex: 'created_at',
    scopedSlots: {
      customRender: 'created_at',
    },
    sorter: (a, b) => a.created_at - b.created_at,
  },
]
const columns2 = [
  {
    title: '用户信息',
    dataIndex: 'nickname',
    scopedSlots: { customRender: 'nickname' },
  },
  {
    title: '卡密信息',
    dataIndex: 'card_info',
    scopedSlots: {
      customRender: 'card_info',
    },
  },
  {
    title: '领取时间',
    dataIndex: 'created_at',
    scopedSlots: {
      customRender: 'created_at',
    },
    sorter: (a, b) => a.created_at - b.created_at,
  },
]
export default {
  data() {
    return {
      userColumns,
      // 商品table规则
      goodsColumns,
      // 视频table规则
      videoColumns,
      // 领取记录规则
      columns1,
      columns2,
      card_id: '', // 卡劵id
      cardData: {
        type: 5,
      }, // 当前卡劵数据
      loadData: async (params) => {
        console.log(params)
        var formData = Object.assign(params, { key: this.card_id })
        const res = await verifyDetail(formData)
        if (res.code != 0) return
        this.cardData = res.data

        return res.list
      },
      // 生成卡券的数量
      num: 1,
      // 是否显示生成卡券的弹窗
      visible: false,

      page: 1,
      size: 15,
      total: 0,
      account_info: [],
      up_id: 0,
      up_password: '',
      visible_password: false,
      visible_upload: false,
      fileList1: [],
      excelName: '',
    }
  },
  methods: {
    getAccountInfo(pageNo = 1) {
      let { size: pageSize, card_id: key } = this

      getAccountInfo({
        pageSize,
        pageNo,
        key,
      }).then((res) => {
        if (res.code === 0) {
          let { totalCount, list } = res.data
          this.account_info = list
          this.total = totalCount
          this.page = pageNo
        }
      })
    },

    // 修改密码
    async password() {
      console.log(this.up_id, this.up_password)
      if (this.up_password) {
        const res = await verifyUp({ id: this.up_id, password: this.up_password })
        if (res.code == 0) {
          this.visible_password = false
          this.getAccountInfo(this.page)
        }
      }
    },
    // 关闭弹窗
    closeModel_password() {
      this.up_password = ''
    },

    // 点击生成卡券
    async creatCard() {
      if (this.num && this.num > 0) {
        const res = await createCard({ num: this.num, key: this.card_id })
        if (res.code == 0) {
          this.visible = false
          this.getAccountInfo()
        }
      }
    },
    // 关闭弹窗
    closeModel() {
      this.num = 1
    },
    // 点击导出卡密
    async exportPass() {
      window.open('/index.php?r=admin/marketing/export&key=' + this.card_id)
    },

    changePage(param) {
      console.log('param,', param)
    },

    beforeUpload(file) {
      console.log(file)
      this.fileList1 = [file]
      this.excelName = file.name
      return false
    },
    handleUpload() {
      const formData = new FormData()
      formData.append('id', this.card_id)
      formData.append('excel', this.fileList1[0])
      console.log(formData)
      this.uploading = true
      verifyUpload(formData).then((res) => {
        if (res.code === 0) {
          this.$message.success(res.msg)
          this.fileList1 = []
          this.visible_upload = false
          this.excelName = ''
        } else {
          this.$message.error(res.msg)
        }
      })
      this.uploading = false
    },
    downloadFile() {
      // window.location.href='/web/statics/verifyCard.xlsx'
      window.open('/web/statics/verifyCard.xlsx')
    },
  },
  created() {
    this.card_id = this.$route.query.id

    this.getAccountInfo()
  },
  components: {
    STable,
  },
  computed: {
    typeText() {
      const type = parseInt(this.cardData.type)
      if (type < 2) {
        return '核销卡'
      } else if (type == 2) {
        return '礼品卡'
      } else if (type == 3) {
        return '储值卡'
      } else if (type == 4) {
        return '卡密卡'
      } else if (type == 5) {
        return '视频卡'
      }
      return ''
    },
    dateText() {
      if (this.cardData.date_type == 1) {
        return `领取后${this.cardData.expire_day == 0 ? '永久有效' : this.cardData.expire_day + '天有效'}`
      } else if (this.cardData.date_type == 2) {
        return `${this.cardData.begin_time}至${this.cardData.end_time}`
      }
      return ''
    },
  },
}
</script>

<style lang="less" scoped>
h3 {
  margin: 20px 0;
  font-size: 16px;
  font-weight: 600;
}
.m-b-20 {
  margin-bottom: 20px;
}

.info {
  p {
    /* color:#333; */
  }

  span {
    display: block;
  }
}
</style>
